<template>
  <div class="login-box">
    <div class="active1right" v-if="type==2">
      <span class="ygjj">实验平台登录</span>
      <div class="input-zh">
        <img :src="PicInputZhBg" alt />
        <input type="text" placeholder="请输入用户名" v-model="ruleForm.username" @keyup.enter="login" />
      </div>
      <div class="input-mm">
        <img :src="PicInputMmBg" alt />
        <input type="password" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter="login" />
      </div>
      <button class="sw-bt" @click="login">登 录</button>
<!--      <span class="ifno" @click.stop="type=1">没有账号</span>-->
    </div>
    <div class="active1right" v-if="type==1">
      <span class="ygjj">实验平台注册</span>
      <div class="input-zh">
        <img :src="PicInputZhBg" alt />
        <input type="text" placeholder="请输入用户名" v-model="ruleForms.labcUserName" @keyup.enter="login" />
      </div>
      <div class="input-zh">
        <img :src="PicInputZhBg" alt />
        <input type="text" placeholder="请输入用户密码" v-model="ruleForms.labcUserPwd" @keyup.enter="login" />
      </div>
      <div class="input-zh">
        <img :src="PicInputZhBg" alt />
        <input type="text" placeholder="请输入真实姓名" v-model="ruleForms.labcRealname" @keyup.enter="login" />
      </div>
      <div class="input-zh">
        <img :src="PicInputZhBg" alt />
        <input type="text" placeholder="请输入手机号" v-model="ruleForms.labcMobile" @keyup.enter="login" />
      </div>
      <div class="input-zh">
        <img :src="PicInputZhBg" alt />
        <input type="text" placeholder="请输入用户单位" v-model="ruleForms.labcCompany" @keyup.enter="login" />
      </div>
      <button class="sw-bt" @click="register">注册</button>
      <span class="ifno" @click.stop="type=2">已有账号</span>
    </div>
  </div>
</template>

<script>
import Sidentify from "./identify.vue";
import { getCMSUrl } from "@/utils/tools.js";
import { login, register } from "../../../api/api";
import { setKey } from "../../../utils/tools.js";
import router from "../../../router";
export default {
  components: {
    Sidentify,
  },
  data() {
    return {
      type: 2,
      isPassWord: 0,
      isName: false,
      nowTime: "",
      personalDetail: {
        avatar: "",
        realName: "",
      },
      islogin: "",
      //判断验证码是否正确
      iscodeTrue: 0,
      ruleForms: {},
      ruleForm: {
        username: "",
        password: "",
      },
      identifyCode: "",
      identifyCodes: "1234567890",
      PicInputZhBg: require("@/assets/image/zhanghu1.png"),
      PicInputMmBg: require("@/assets/image/mima1.png"),
      PicInputYzmBg: require("@/assets/image/yanzhengma1.png"),
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  created() {
    let newstr = sessionStorage.getItem("personal_detail");
    let lew = JSON.parse(newstr);
    this.personalDetail = lew;
    this.islogin = sessionStorage.getItem("set_username");
    this.getTime();
  },
  computed: {
    baseUrl() {
      return this.$store.state.fileIp;
    },
  },
  methods: {
    register() {
      let data = this.ruleForms;
      register(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$alert("注册成功", "标题名称", {
            confirmButtonText: "确定",
            callback: () => {
              this.type = 2;
            },
          });
        } else {
          alert(res.msg);
        }
      });
    },
    login() {
      console.log(this.ruleForm);
      let data = this.ruleForm;
      login(data).then((res) => {
        console.log(res.code);
        if (res.code == 200) {
          setKey("token", res.data.access_token);
          router.push({
            path: "/",
          });
          location.reload();
        }else{
                    this.$alert(res.msg, "标题名称", {
            confirmButtonText: "确定",
            callback: () => {

            },
          });
        }
      });
    },

    //绑定回车事件
    enterSubmit(ev) {
      var keyCode = ev.keyCode || ev.which;
      if (keyCode == 13) {
        this.ValidForm();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ifno {
  font-size: 14px;
  display: block;
  margin-top: 5px;
}
.active1right {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.active1right .input-yzmd > input {
  width: 228px;
  height: 42px;
  border-radius: 3px;
  border: 1px solid rgba(221, 221, 221, 1);
}

.active1right img {
  width: 14.21px;
  height: 14.21px;
  position: absolute;
  top: 14px;
  left: 7px;
}

.s-canvas {
  width: 84px;
  position: absolute;
  right: 0px;
  bottom: 80px;
}

.ygjj {
  text-align: center;
  width: 349px;
  border-bottom: solid 2px #2a5caa;
  font-size: 20px;
  line-height: 50px;
  font-weight: 600;
  color: #2a5caa;
}

input {
  height: 42px;
  width: 100%;
  height: 42px;
  border-radius: 3px;
  border: 1px solid rgba(221, 221, 221, 1);
  padding-left: 26px;
  outline: none;
}

.input-zh {
  position: relative;
margin-bottom: 5px;
  .code-tip {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 59, 48, 1);
    line-height: 20px;
    position: absolute;
    left: 0;
    top: 42px;
  }
}

.input-mm {
  position: relative;

  .code-tip {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 59, 48, 1);
    line-height: 20px;
    position: absolute;
    left: 0;
    top: 42px;
  }
}

.input-yzmd {
  position: relative;

  .code-tip {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 59, 48, 1);
    line-height: 20px;
    position: absolute;
    left: 0;
    top: 46px;
  }
}

.sw-bt {
  margin-top: 10px;
  height: 42px;
  background-color: #2a5caa;
  color: white;
  border: 0px;
  border-radius: 3px;
  width: 100%;
}

.login_code {
  border-radius: 3px;
  border: 1px solid rgba(221, 221, 221, 1);
}

.login_code .login_code_focus {
  border-radius: 3px;
  border: 1px solid rgba(221, 33, 38, 1);
}

.focus-border-color {
  border: 1px solid rgba(221, 33, 38, 1) !important;
}

.login-box {
  width: 100%;

  .login-after {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0 0 0;

    h1 {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      line-height: 28px;
      text-align: center;
      margin-top: 15px;
      margin-bottom: 28px;
    }

    span {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 22px;
      margin-bottom: 36px;
    }

    img {
      width: 82px;
      height: 82px;
      object-fit: cover;
      border-radius: 50%;
    }

    /deep/.el-button--goback {
      width: 296px;
      height: 38px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      border: 1px solid rgba(221, 33, 38, 1);
      padding: 0;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(221, 33, 38, 1);
      line-height: 22px;
    }
  }
}
</style>
